<!-- 邀请矿工明细 -->
<template>

  <div class="pag" >
    <div class="tabs">
      <div class="tabs-head">
        <div :class="{'choose': curTab==1}" @click="curTab=1">已开启挖矿矿工</div>
        <div :class="{'choose': curTab==2}" @click="curTab=2">未开启挖矿矿工</div>
      </div>
      <div class="tabs-body">
        <div :class="{'choose': curTab==1}">
          <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll">
            <div class="m-list">
              <div class="m-item" v-for="item in list">
                <div>
                  <div>{{ item.nickname }}</div>
                  <p>UID:{{ item.uid }}</p>
                </div>
                <div>{{ item.createTime }}</div>
              </div>
            </div>
          </cube-scroll>
        </div>
        <div :class="{'choose': curTab==2}">
          <cube-scroll :options="options" @pulling-up="onPullup2" ref="scroll2">
            <div class="m-list">
              <div class="m-item" v-for="item in list2">
                <div>
                  <div>{{ item.nickname }}</div>
                  <p>UID:{{ item.uid }}</p>
                </div>
                <div>{{ item.createTime }}</div>
              </div>
            </div>
          </cube-scroll>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import { getMinerListDetail } from 'api'

  export default {
    data() {
      return {
        options: {
          pullUpLoad: true
        },
        list: [],
        list2: [],
        isLoading: false,
        curTab: 1,
        uid: '',
        token: ''
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.getData()
      })
    },
    mounted(){

    },
    watch: {
      curTab(val){
        this.$nextTick(()=>{
          this.$refs['scroll' + (val == 1 ? '' : val)].forceUpdate(true)
        })
      }
    },
    methods: {
      onPullup2(){
        let me = this
        let sc = this.$refs.scroll2
        //console.log(this.list.length)
        if(this.list2.length < 50){
          return getMinerListDetail({
            source: 2,
            per: 50,
            page: 1
          })
            .then(({data})=>{
              if(!data){
                return
              }
              this.list2 = data
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }).catch(e=>{
              sc.forceUpdate()
            })
        }

        let pagec = Math.floor((this.list2.length - 50) / 50) + 1
        let pagey = (this.list2.length - 50) % 50
        getMinerListDetail(
          {
            source: 2,
            per: 50,
            page: 1 + pagec
          }
        )
          .then(({data})=>{
            if(!data){
              return
            }
            if(pagey){
              data.splice(0, pagey)
            }
            me.list2 = me.list2.concat(data)
            if(!data.length){
              sc.forceUpdate()
            }else{
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }

          }).catch(e=>{
          sc.forceUpdate()
        })

      },
      onPullup(){
        let me = this
        let sc = this.$refs.scroll
        //console.log(this.list.length)
        if(this.list.length < 50){
          return getMinerListDetail({
            source: 1,
            per: 50,
            page: 1
          })
            .then(data=>{
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }).catch(e=>{
              sc.forceUpdate()
            })
        }

        let pagec = Math.floor((this.list.length - 50) / 50) + 1
        let pagey = (this.list.length - 50) % 50
        getMinerListDetail(
          {
            source: 1,
            per: 50,
            page: 1 + pagec
          }
        )
          .then(({data})=>{
            if(!data){
              return
            }
            if(pagey){
              data.splice(0, pagey)
            }
            me.list = me.list.concat(data)
            if(!data.length){
              sc.forceUpdate()
            }else{
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }

          }).catch(e=>{
          sc.forceUpdate()
        })

      },
      getData(){
        getMinerListDetail({
          source: 1,
          per: 50,
          page: 1
        })
          .then(({data})=>{
            if(!data){
              return
            }
            this.list = data
          })
          .catch(e=>{
            this.$warn(e.info)
          })
        getMinerListDetail({
          source: 2,
          per: 20,
          page: 1
        })
          .then(({data})=>{
            if(!data){
              return
            }
            this.list2 = data
          })
          .catch(e=>{
            this.$warn(e.info)
          })
      },
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    height: 100%;
    overflow-y: auto;
    padding-top: 24px;
    background: #fff;
  }

  .tabs {
    height: 100%;
  }

  .tabs-head {
    display: flex;
    width:420px;
    height:60px;
    border:2px solid rgba(23,62,143,1);
    border-radius:10px;
    margin: 0 auto 58px auto;
    > div {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #173E8F;
      font-size: 24px;
      font-weight: 600;
      &.choose {
        background: #173E8F;
        color: #fff;
      }
    }
  }

  .tabs-body {
    height: calc(100% - 118px);
    > div {
      height: 100%;
      display: none;
      &.choose {
        display: block;
      }
    }
  }

  .m-list {
    padding: 0 30px;
  }

  .m-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ECECEC;
    height: 97px;
    > div {
      &:nth-of-type(1) {
        font-size: 30px;
        color: #202C5B;
        p {
          margin-top: 14px;
          color: #71768C;
          font-size: 20px;
        }
      }
      &:nth-of-type(2) {
        font-size: 24px;
        color: #71768C;
      }
    }
  }




</style>













